<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">图书后台管理系统</el-menu-item>
      <el-submenu  style="margin-left: 1150px">
        <template slot="title">欢迎:{{$store.state.user.username}}</template>
        <el-menu-item  @click="dialogVisible=true;userupdate()">个人信息修改</el-menu-item>
        <el-menu-item  @click="dialogVisible1=true;">修改密码</el-menu-item>
        <el-menu-item  @click="tuichu()">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose1">
      用户名:<el-input v-model="updateuser.name" style="width: 60%" autocomplete="off"></el-input><br><br>
      性别:<el-input v-model="updateuser.sex" style="width: 60%" autocomplete="off"></el-input><br><br>
      手机号:<el-input v-model="updateuser.phone" style="width: 60%" autocomplete="off"></el-input><br><br>
      身份证号:<el-input v-model="updateuser.idcard" style="width: 60%" autocomplete="off"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;upduser()">确 定</el-button>
  </span>

    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="40%"
      :before-close="handleClose1">
      密码: &nbsp;&nbsp;&nbsp;
      <el-input v-model="userpwd.password1" type="password" style="width: 60%" autocomplete="off"></el-input><br><br>
      确认密码:<el-input type="password" v-model="userpwd.newpassword" style="width: 60%" autocomplete="off"></el-input><br><br>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;updpassword()">确 定</el-button>
  </span>
    </el-dialog>
    <el-container>
      <el-aside>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color=""
          text-color=""
          active-text-color="" style="height: 1200px;width: 229px">
          <el-submenu :index="item.mid+''" v-for="(item) in menu1" :key="item.name" v-if="item.son===0">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(item2) in menu1" v-if="item2.son===item.mid" :key="item2.name">
              <el-menu-item>
                <router-link  :to="item2.url" tag="font" v-if="item2.url!=undefined">{{item2.name}}</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {data} from "autoprefixer";
import da from "element-ui/src/locale/lang/da";

export default {
  name: "index",
  data(){
    return{
      activeIndex2: '1',
      activeIndex: '1',
      dialogVisible : false,
      dialogVisible1:false,
      menu:[],
      menu1:{
        mid:'',
        name:'',
        son:'',
        url:'',
        state:''
      },
      updateuser:[],
      userpwd:{password1:"",newpassword:""}
    }
  },
  created() {
    this.$http.post('/backservice/menu/find').then(data=>{
      console.log(data)
      this.menu=data;
      this.menu1=data;
    })
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    userupdate(){
      let uid=this.$store.state.user.uid;
      this.$http.post('backservice/user/finduser',{uid:uid}).then(data=>{
        console.log(data)
        this.updateuser=data;
      })
    },
    upduser(){
      this.$http.post('backservice/user/updateuser',this.updateuser).then(data=>{
        if (data>0){
          this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          });
        }else {
          this.$message.error('错了哦，这是一条错误消息');
        }
      })
    },
    updpassword(){
      let uid=this.$store.state.user.uid;
      console.log(uid)
      let  pass=this.userpwd.password1;
      let newpass=this.userpwd.newpassword;
      if (pass==newpass){
        this.$http.post('backservice/user/updpass',{password:newpass,id:uid}).then(data=>{
          if (data>0){
            this.$router.push("/")
            window.location.reload();
            this.$message({
              message: '恭喜你，这是一条成功消息',
              type: 'success'
            });
          }else {
            this.$message.error('错了哦，这是一条错误消息');
          }
        })
      }else{
        this.$message.error('错了哦，密码不一致');
      }
    },
    tuichu(){
      this.$router.push("/")
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
